<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-gray-900 dark:to-black px-4 py-24">
    <div class="max-w-3xl mx-auto">

      <!-- 顶部标题 -->
      <h1 class="text-3xl font-extrabold bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 text-transparent bg-clip-text mb-6">
        在线客服
      </h1>

      <!-- 聊天区域 -->
      <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 flex flex-col h-[60vh]">

        <!-- 消息列表 -->
        <div ref="chatBox" class="flex-1 space-y-4 overflow-y-auto pr-2">
          <div v-for="msg in messages" :key="msg.id" class="flex" :class="msg.from === 'user' ? 'justify-end' : 'justify-start'">
            <div
              class="max-w-[70%] rounded-lg px-4 py-3 text-sm"
              :class="msg.from === 'user'
                ? 'bg-indigo-600 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'"
            >
              {{ msg.text }}
            </div>
          </div>
          <!-- 正在输入提示 -->
          <div v-if="typing" class="text-xs text-gray-400">客服正在输入...</div>
        </div>

        <!-- 输入框 -->
        <form @submit.prevent="sendMessage" class="flex gap-3 mt-4">
          <input
            v-model="inputText"
            type="text"
            required
            placeholder="输入消息..."
            class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:bg-white dark:focus:bg-black focus:ring-2 focus:ring-indigo-500 outline-none transition"
          />
          <button
            type="submit"
            class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition transform hover:-translate-y-0.5 disabled:opacity-50"
            :disabled="inputText.trim() === ''"
          >
            发送
          </button>
        </form>
      </div>

      <!-- 快速常见问题 -->
      <div class="mt-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4">常见问题</h2>
        <div class="space-y-3 text-sm">
          <div v-for="q in faq" :key="q.id">
            <button @click="toggleFaq(q.id)" class="w-full text-left font-medium text-indigo-600 dark:text-indigo-400 hover:underline">
              {{ q.q }}
            </button>
            <div v-if="openFaq === q.id" class="mt-2 text-gray-600 dark:text-gray-300">
              {{ q.a }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

/* ---------- 消息列表 ---------- */
const messages = ref([])
const inputText = ref('')
const typing = ref(false)
const chatBox = ref(null)

/* ---------- 常见问题 ---------- */
const faq = ref([
  { id: 1, q: '如何修改密码？', a: '进入「个人中心-账号安全」即可修改密码。' },
  { id: 1, q: '如何修改密码？', a: '进入「个人中心-账号安全」即可修改密码。' },
  { id: 2, q: '题目审核需要多久？', a: '通常 1-3 个工作日，审核结果会推送消息。' },
  { id: 3, q: '会员如何退款？', a: '虚拟商品暂不支持退款，请联系客服人工处理。' }
])
const openFaq = ref(null)

function toggleFaq(id) {
  openFaq.value = openFaq.value === id ? null : id
}

/* ---------- 发送消息 ---------- */
function sendMessage() {
  if (!inputText.value.trim()) return

  // 用户消息
  messages.value.push({ id: Date.now(), from: 'user', text: inputText.value.trim() })
  scrollToBottom()

  // 清空输入
  const userText = inputText.value
  inputText.value = ''

  // 模拟客服打字
  typing.value = true
  setTimeout(() => {
    typing.value = false
    const reply = generateReply(userText)
    messages.value.push({ id: Date.now() + 1, from: 'support', text: reply })
    scrollToBottom()
  }, 1000 + Math.random() * 1000)
}

/* ---------- 模拟客服回复 ---------- */
function generateReply(userText) {
  const lower = userText.toLowerCase()
  if (lower.includes('密码')) return '您可在「个人中心-账号安全」修改密码。'
  if (lower.includes('审核')) return '题目审核一般 1-3 个工作日。'
  if (lower.includes('会员')) return '会员相关问题请查看「会员中心」或继续提问。'
  return '感谢您的留言，客服会尽快处理，请稍等。'
}

/* ---------- 滚动到底部 ---------- */
function scrollToBottom() {
  nextTick(() => {
    chatBox.value?.scrollTo({ top: chatBox.value.scrollHeight, behavior: 'smooth' })
  })
}

/* ---------- 初始欢迎语 ---------- */
onMounted(() => {
  messages.value.push({
    id: Date.now(),
    from: 'support',
    text: '您好！有什么可以帮助您？'
  })
})
</script>